<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/core.css" />
		<script src="vendor/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>

	<body>
		<header class="header">
			<div class="top" id="top">
				<div class="content">
					<div class="left">
						<div class="all-menu">
							<a href="#"></a>
							<div class="sub-menu">
								<div class="list">
									<h3>Our Services</h3>
									<ul class="sub-nav">
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">About Us</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Services</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Vacancies</a>
										</li>

									</ul>
								</div>
								<div class="list">
									<h3>Our Services</h3>
									<ul class="sub-nav">
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">About Us</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Services</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Vacancies</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">FAQ</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Pricing Table</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Our Team</a>
										</li>

									</ul>
								</div>
								<div class="list">
									<h3>Our Services</h3>
									<ul class="sub-nav">
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">About Us</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Services</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Vacancies</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">FAQ</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Pricing Table</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Our Team</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Not Found</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Search Results</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Skills</a>
										</li>
									</ul>
								</div>
								<div class="list">
									<h3>Our Services</h3>
									<ul class="sub-nav">
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">About Us</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Services</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">Vacancies</a>
										</li>
										<li><i class="icon1"></i><i class="icon2"></i>
											<a href="#">FAQ</a>
										</li>

									</ul>
								</div>
							</div>
						</div>
						<div class="logo">
							<a href="#">
								<span class="icon"></span>
								<span class="globals"></span>
							</a>
						</div>
					</div>
					<div class="nav">
						<ul>
							<li>
								<a href="index.html" class="current">Home</a>
							</li>
							<li class="pages">
								<a href="pages.html">Pages</a>
								<ul class="sub-nav">
									<li>
										<a href="about-us.html">About Us</a>
									</li>
									<li>
										<a href="vancancies-details.html">Vacancies Details</a>
									</li>
									<li>
										<a href="blog-details.html">Blog Details</a>
									</li>
								</ul>
							</li>
							<li class="pages">
								<a href="portfolio.html">Portfolio</a>
								<ul class="sub-nav">
									<li>
										<a href="masonry-four.html">Masonry Four</a>
									</li>
									<li>
										<a href="masonry-three.html">Masonry Three</a>
									</li>
									<li>
										<a href="grid_three.html">Grid Three</a>
									</li>
									<li>
										<a href="grid-masonry-three.html">Grid Masonry Three</a>
									</li>
									<li>
										<a href="landscape.html">Landscape</a>
									</li>
									<li>
										<a href="gallery.html">Gallery</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="vacancies.html">Vacancies</a>
							</li>
							<li>
								<a href="blog.html">Blog</a>
							</li>
							<li>
								<a href="cantact.html">Contacts</a>
							</li>
						</ul>
					</div>
					<div class="right">
						<span></span>
						<ul class="sub-nav">
							<li>
								<a href="#">About Us</a>
							</li>
							<li>
								<a href="#">Services</a>
							</li>
							<li>
								<a href="#">Vacancies</a>
							</li>
							<li>
								<a href="#">FAQ</a>
							</li>
							<li>
								<a href="#">Pricing Table</a>
							</li>
							<li>
								<a href="#">Our Team</a>
							</li>
						</ul>
					</div>
				</div>

			</div>
			<!-------移动端导航------->
			<div class="menu-list" id="menu-list">
				<div class="item">
					<ul class="item-menu">
						<li class="home" id="home"></li>
						<li class="more"></li>
						<li class="logo"></li>
					</ul>
					<ul id="sub-menu">
						<li><a href="index.html">Home</a></li>
						<li><a href="pages.html">pages</a></li>
						<li><a href="portfolio.html">Portfolio</a></li>
						<li><a href="vacancies.html">Vacancies</a></li>	
						<li><a href="blog.html">Blog</a></li>
						<li><a href="cantact.html">Contacts</a></li>
					</ul>
				</div>
			</div>

			<div class="bottom" id="bottom">
				<div class="inner">
					<div class="left">
						<a href="#">Home</a>
						<span>/</span>
						<a href="#">pages</a>
						<span>/</span>
						<a href="#" class="current">Dropdown Menu Style</a>
					</div>
					<div class="right">
						<div class="message">
							<a href="#">+</a>
							<div class="send">
								<span><i></i>Send a Message</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>

		<section class="grid_three_container">
			<div class="grid_three_contant">
				<div class="contant-center">
					<h1>Portfolio Grid 3 Columns</h1>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
					<p>tincidunt ut laoreet dolore magna aliquam.</p>
					<div class="search-box">
						<form class="search-form">
							<input type="text" id="search-input" class="search-input" value="" placeholder="Search.." style="color: white;" />
							<input type="button" id="search-submit" class="search-button" name="" />
						</form>
					</div>
				</div>
			</div>
			<div class="grid_three_nav">
				<div class="nav-center">
					<ul class="nav-wrap">
						<li>
							<a href="" class="current">All Categories</a>
						</li>
						<li>
							<a href="">Graphic Design</a>
						</li>
						<li>
							<a href="">Mock-Ups</a>
						</li>
						<li>
							<a href="">Icons</a>
						</li>
						<li>
							<a href="">PSD Templates</a>
						</li>
						<li>
							<a href="">WordPress</a>
						</li>
						<li>
							<a href="">Miscellaneous</a>
						</li>
					</ul>
					<ul class="nav-display">
						<li>
							<a href=""><i></i></a>
						</li>
					</ul>
				</div>
			</div>
			<section class="cool">
				<div class="grid_three_grid">
					<ul>
						<li class="group">
							<div class="item">
								<div class="thum">
									<a href="">
										<img src="img/gridThree_01.jpg" width="397px" height="260px" />
										<div class="ico">
											<img src="img/grid_three_link.png" />
										</div>
										<div class="mask"></div>
									</a>
								</div>
								<div class="meta">
									<div class="title">
										<h1><a href="">QARO - Flat PSD Template</a></h1>
									</div>
								</div>
								<div class="on">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
								</div>
								<div class="extra">
									<div class="comment">
										<a href=""><i></i><span>PSD Templates</span></a>
									</div>
								</div>
								<div class="circle"><i></i></div>
							</div>
						</li>
						<li class="group">
							<div class="item">
								<div class="thum">
									<a href="">
										<img src="img/gridThree_02.jpg" width="397px" height="260px" />
										<div class="ico">
											<img src="img/grid_three_link.png" />
										</div>
										<div class="mask"></div>
									</a>
								</div>
								<div class="meta">
									<div class="title">
										<h1><a href="">QARO - Flat PSD Template</a></h1>
									</div>
								</div>
								<div class="on">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
								</div>
								<div class="extra">
									<div class="comment">
										<a href=""><i></i><span>PSD Templates</span></a>
									</div>
								</div>
								<div class="circle"><i></i></div>
							</div>
						</li>
						<li class="group">
							<div class="item">
								<div class="thum">
									<a href="">
										<img src="img/gridThree_03.jpg" width="397px" height="260px" />
										<div class="ico">
											<img src="img/grid_three_link.png" />
										</div>
										<div class="mask">
										</div>
									</a>
								</div>
								<div class="meta">
									<div class="title">
										<h1><a href="">QARO - Flat PSD Template</a></h1>
									</div>
								</div>
								<div class="on">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
								</div>
								<div class="extra">
									<div class="comment">
										<a href="">
											<i></i>
											<span>PSD Templates</span>
										</a>
									</div>
								</div>
								<div class="circle">
									<i></i>
								</div>
							</div>
						</li>
						<li class="group">
							<div class="item">
								<div class="thum">
									<a href="">
										<img src="img/gridThree_04.jpg" width="397px" height="260px" />
										<div class="ico">
											<img src="img/grid_three_link.png" />
										</div>
										<div class="mask">
										</div>
									</a>
								</div>
								<div class="meta">
									<div class="title">
										<h1><a href="">QARO - Flat PSD Template</a></h1>
									</div>
								</div>
								<div class="on">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
								</div>
								<div class="extra">
									<div class="comment">
										<a href=""><i></i><span>PSD Templates</span></a>
									</div>
								</div>
								<div class="circle"><i></i></div>
							</div>
						</li>
						<li class="group">
							<div class="item">
								<div class="thum">
									<a href="">
										<img src="img/gridThree_05.jpg" width="397px" height="260px" />
										<div class="ico">
											<img src="img/grid_three_link.png" />
										</div>
										<div class="mask">
										</div>
									</a>
								</div>
								<div class="meta">
									<div class="title">
										<h1><a href="">QARO - Flat PSD Template</a></h1>
									</div>
								</div>
								<div class="on">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
								</div>
								<div class="extra">
									<div class="comment">
										<a href=""><i></i><span>PSD Templates</span></a>
									</div>
								</div>
								<div class="circle"><i></i></div>
							</div>
						</li>
						<li class="group">
							<div class="item">
								<div class="thum">
									<a href="">
										<img src="img/gridThree_06.jpg" width="397px" height="260px" />
										<div class="ico">
											<img src="img/grid_three_link.png" />
										</div>
										<div class="mask">
										</div>
									</a>
								</div>
								<div class="meta">
									<div class="title">
										<h1><a href="">QARO - Flat PSD Template</a></h1>
									</div>
								</div>
								<div class="on">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
								</div>
								<div class="extra">
									<div class="comment">
										<a href=""><i></i><span>PSD Templates</span></a>
									</div>
								</div>
								<div class="circle"><i></i></div>
							</div>
						</li>
						<li class="group">
							<div class="item">
								<div class="thum">
									<a href="">
										<img src="img/gridThree_07.jpg" width="397px" height="260px" />
										<div class="ico">
											<img src="img/grid_three_link.png" />
										</div>
										<div class="mask"></div>
									</a>
								</div>
								<div class="meta">
									<div class="title">
										<h1><a href="">QARO - Flat PSD Template</a></h1>
									</div>
								</div>
								<div class="on">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
								</div>
								<div class="extra">
									<div class="comment">
										<a href=""><i></i><span>PSD Templates</span></a>
									</div>
								</div>
								<div class="circle"><i></i></div>
							</div>
						</li>
						<li class="group">
							<div class="item">
								<div class="thum">
									<a href="">
										<img src="img/gridThree_08.jpg" width="397px" height="260px" />
										<div class="ico">
											<img src="img/grid_three_link.png" />
										</div>
										<div class="mask">
										</div>
									</a>
								</div>
								<div class="meta">
									<div class="title">
										<h1><a href="">QARO - Flat PSD Template</a></h1>
									</div>
								</div>
								<div class="on">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
								</div>
								<div class="extra">
									<div class="comment">
										<a href=""><i></i><span>PSD Templates</span></a>
									</div>
								</div>
								<div class="circle"><i></i></div>
							</div>
						</li>
						<li class="group">
							<div class="item">
								<div class="thum">
									<a href="">
										<img src="img/gridThree_09.jpg" width="397px" height="260px" />
										<div class="ico">
											<img src="img/grid_three_link.png" />
										</div>
										<div class="mask">
										</div>
									</a>
								</div>
								<div class="meta">
									<div class="title">
										<h1><a href="">QARO - Flat PSD Template</a></h1>
									</div>
								</div>
								<div class="on">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
								</div>
								<div class="extra">
									<div class="comment">
										<a href=""><i></i><span>PSD Templates</span></a>
									</div>
								</div>
								<div class="circle"><i></i></div>
							</div>
						</li>
					</ul>
				</div>
			</section>
			<div class="navigation">
				<div class="navigation-left">
					<i id="prev"></i> Previous Page
				</div>
				<div class="navigation-center">
					<ul>
						<li>1</li>
						<li>2</li>
						<li class="current">3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li class="nocurrent">...</li>
						<li>36</li>
						<li>37</li>
						<li>38</li>
					</ul>
				</div>
				<div class="navigation-right">
					Next Page <i id="next"></i>
				</div>
			</div>
		</section>

		<footer class="common-footer-wrapper">
			<div class="common-footer">
				<div class="common-footer-center">
					<div class="center-text">
						<span>Follow Us in Social Networks</span>
						<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
					</div>

					<ul class="center-menu">
						<li><img src="img/footer1.png" /></li>
						<li><img src="img/footer9.png" /></li>
						<li><img src="img/footer5.png" /></li>
						<li><img src="img/footer2.png" /></li>
						<li><img src="img/footer8.png" /></li>
						<li><img src="img/footer4.png" /></li>
						<li><img src="img/footer3.png" /></li>
						<li><img src="img/footer6.png" /></li>
					</ul>
				</div>
			</div>

			<div class="common-footer-bg">
				<div class="bg-text">
					<div class="text-left">
						<span>Twitter Widget</span>
						<div class="left-inner-top">
							<img src="img/footer7.png" />
							<div class="inner-top-write">
								Mirum est
								<a href="">@global</a> notare quam littera gothica.qua, nunc putamus parum,antepodse
								<a href="">http://t.co/6621 J8UFV</a>
								<p>6 MINUTES AGO</p>
							</div>
						</div>

						<div class="left-inner-bottom">
							<img src="img/footer7.png" />
							<div class="inner-bottom-write">
								<a href="">@themefire</a> notare quam littera gothica.qua, nunc putamus parum,antepodse
								<a href="">http://t.co/6621 J8UFV</a>
								<p>18 JUN 2015</p>
							</div>
						</div>
					</div>

					<div class="text-center">
						<span>Dribble Widget</span><br /><br />
						<div class="center-span">claritas est ynew trdhnm euy yebviumgd tyreuin oiywdw gyns ghbnh wikjsdhd</div>
						<ul class="center-img-item">
							<li><img src="img/footer11.jpg" width="139px" height="100px" /></li>
							<li><img src="img/footer13.jpg" width="139px" height="100px" /></li>
							<li class="item-hide"><img src="img/footer12.jpg" width="139px" height="100px" /></li>
							<li><img src="img/footer15.jpg" width="139px" height="100px" /></li>
							<li><img src="img/footer14.jpg" width="139px" height="100px" /></li>
							<li class="item-hide"><img src="img/footer16.jpg" width="139px" height="100px" /></li>
						</ul>
					</div>

					<div class="text-right">
						<span>Email Newsletters</span><br /><br />
						<div class="right-write">
							Sign Up our Newsletter to get latest updates and office subscribe to receive news in your inbox
						</div>
						<div class="right-email">
							Email Address
						</div>
						<div class="right-now">
							<a href="">Subscribe Now</a>
						</div>
					</div>
				</div>
			</div>

			<div class="common-footer-copyright">
				<div class="copyright-inner">
					<img src="img/footer-copyright.png" class="copyright-img" />
					<div class="copyright-text">@2015 Design Studio <span>Globals</span> /Designed by <span>ThemeFire</span> / only for <span>Envato Market</span></div>
				</div>
			</div>
		</footer>

		<div class="return-top" onclick="returnTop()">
			<img src="img/returnTop.png" style="width: 70px;height: 70px;" />
		</div>

		<script src="vendor/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/core.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>